<div class="row">
  <div class="step-wrapper medium-10 medium-centered large-10 large-centered column">
    <div class="stpy large-12 column">

      <div class="step-statement medium-3 large-4 columns">
        <h5>User Registration</h5>
        <p>Find Collegues in behomebased.ph  </p>
      </div>  

      <div class="stepbystep medium-9  large-8 columns">
        <div class="right ui ordered  small steps">
          <div class="completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Basic Information</div>
            </div>
          </div>

          <div class="animated slideInRight completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Address</div>
            </div>
          </div>
          <div class="active step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Education</div>
            </div>
          </div>
          <div class="disabled step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Work Experience</div>
            </div>
          </div>         
        </div>
      </div>

      <div class="hr-reg large-12 column"><hr></div>
        <div class="large-12 column" style="padding:0;">

          <div class="reg-left-wrap medium-6 large-6 column" >
            <div class="reg-left large-12 column"><small>*Required Fields</small></div>

              <div class="edu-wrap large-12 column">
                <label>Educational Attainment</label>
                <input placeholder="" style="width: 100%;" tabindex="0" id="s2id" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" type="text">
              </div>

              <div class="edu-wrap large-12 columns">
                <div class="medium-4 large-4 columns" style="padding-left:0;">
                  <select id="attainment" placeholder="Attainment">
                    <option>Attaintment</option>
                    <option>Secondary</option>
                    <option>Tertiary</option>
                    <option>Master's Degree</option>
                    <option>Doctoral</option>
                  </select>
                </div>
                <div class="medium-4 large-4 columns">
                  <select name="yearStarted" id="yearStart">
                      <option value="0000"<?php echo $yearStarted == '0000' ? 'selected="selected"' : ''; ?>>Year Started</option>
                        <?php
                        for($i=date('Y'); $i>1899; $i--) {
                            $selected = '';
                            if ($yearStarted == $i) $selected = ' selected="selected"';
                            print('<option value="'.$i.'"'.$selected.'>'.$i.'</option>'."\n");
                        }
                        ?>
                  </select>
                </div>
                <div class="medium-4 large-4 columns" style="padding-right:0;">
                  <select name="yearGrad" id="yearEnd" >
                      <option value="0000"<?php echo $yearGrad == '0000' ? 'selected="selected"' : ''; ?>>Year Graduated</option>
                        <?php
                        for($i=date('Y'); $i>1899; $i--) {
                            $selected = '';
                            if ($yearGrad == $i) $selected = ' selected="selected"';
                            print('<option value="'.$i.'"'.$selected.'>'.$i.'</option>'."\n");
                        }
                        ?>
                  </select>
                </div>
              </div>

            <div class="edu-wrap large-12 column">
              <select id="coursedropdown" style="width:100%;">
                <option></option>
                <option value="">Accountancy</option>
                <option value="">Architecture</option>
                <option value="">Banking and Finance</option>
                <option value="">Business Management</option>
                <option value="">Marketing</option>
                <option value="">Customs Administration</option>
                <option value="">Hospitality Management</option>
                <option value="">Education</option>
                <option value="">Chemical Engineering</option>
                <option value="">Civil Engineering</option>
                <option value="">Computer Engineering</option>
                <option value="">Electrical Engineering</option>
                <option value="">Electronics Engineering</option>
                <option value="">Industrial Engineering</option>
                <option value="">Mechanical Engineering</option>
                <option value="">Mining,Geology and Ceramics Engineering</option>
                <option value="">Law</option>
                <option value="">Nursing</option>
                <option value="">Pharmacy</option>
                <option value="">Biology</option>  
                <option value="">Chemistry</option>
                <option value="">Computer Science</option>
                <option value="">Mathematics</option>
                <option value="">Psychology</option>
                <option value="">Information Technology and Management</option>
              </select>
            </div>
            <div class="add-school large-12 column">
                <a id='btnAddSchool'>+Add School</a>
            </div>

            <div class="edu-wrap large-12 column">
            <label>Skills</label>
              <input placeholder="" tabindex="0" id="skills-auto" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="radius select2-input" type="text" style="width:100%;border:solid 1px white;border-radius:.4rem;">
            </div>        
          </div>
          <div id="schoolsContainer" class="medium-6 large-6 column">


            <?php if(sizeof($schools)){foreach ($schools as $value) { ?>
             
            <div class="medium-10 medium-centered large-10 columns mySchools" school="<?=$value->school?>" yearStart="<?=$value->yearStart?>" yearEnd = "<?=$value->yearEnd?>" attainment="<?=$value->attainment?>" course = "<?=$value->course?>" style="padding-top:3rem;">
                <div class="school-field large-12 column">
                    <div class="medium-8 large-8 columns">
                      <p id="school"><?=$value->school?>(<?=$value->yearStart?>-<?=$value->yearEnd?>)</p>
                      <p id="attaintment" style="margin-top:-1.4rem;"><small><?=$value->attainment?></small></p>
                      <p id="myCourse" style="margin-top:-1.4rem;"><small><?=$value->course?></small></p>
                    </div>
                    <div class="cancel-btn text-right medium-4 large-4 columns">
                      <a class="tiny radius button"><i class="fa fa-pencil-square-o"></i></a>&nbsp;
                      <a class="tiny radius button deleteSchool"><i class="fa fa-times"></i></a>
                    </div>
                </div>
            </div>

            <?php } } ?> 
          </div>
        </div>

        <div class="large-12 column" style="padding:0;margin-top:1rem;">
            <div class="btn-save text-left medium-8 large-8 columns" style="padding:0;">
              <a href="<?=BASE_URI ?>registration/step_2" class="text-left button">Previous</a>     
            </div>
            <div class="btn-save text-right medium-4 large-4 columns" style="padding:0;"> 
              <a id="btnSaveStep3"  class="button">Next</a>
            </div>
        </div>

    </div>
  </div>
</div>


<script>
  $(document).ready(function() {
    $("#s2id").select2({
      tags:["Adamson University", "Ateneo De Manila university"],
      maximumSelectionSize: 1,
      placeholder: "Name of School"
    });

    $("#coursedropdown").select2({
      placeholder: "Degree",
      allowClear: true
    });


    var skills = '<?= $skills ?>';
    if(skills){
        skills = JSON.parse(skills);
    }
      

    $("#skills-auto").val(skills).select2({
      tags:["PHP", "HTML", "VB.Net","Web Design","Mysql","Gulp","Grunt","Sass","CSS","Phalcon","SDLC","Water Fall","Scrumming","Project Management"],
      maximumSelectionSize: 5,
      placeholder: "Select Skills"
    });
  });
</script>

<style>
body {
  background: #F5F5F5 !important;
}
</style>



<script type="text/javascript">
function save(skills,schools){
    var params = {};
    params.skills = skills;
    params.schools = schools;
    return $.ajax({
        url: URL + 'registration/save/step_3',
        data: params,
        type: 'post',
        dataType: 'json'
    });
}

function addSchool(data){
    var template = $('#attainmentTpl').html();
    var html = Mustache.to_html(template,data);
    $(html).appendTo('#schoolsContainer').hide().fadeIn('slow');  
}

var $save = $('#btnSaveStep3');
var $addSchool = $('#btnAddSchool');
var $course = $('#coursedropdown');
var $attainment = $('#attainment options:selected');
var $schoolsContainer = $('#schoolsContainer');
$addSchool.click(function(){
    var course = '';
    if($course.select2('data')){
        course = $course.select2('data').text;
    }
    
    var school = $('#s2id').val();
    var attainment = $('#attainment').val();
    var yearStart = $('#yearStart').val();
    var yearEnd = $('#yearEnd').val();
    
    if(!school){alert('Enter School Name'); return false;}
    if(!yearStart || yearStart <= 0){alert('Enter Year You Start'); return false;}
    if(!yearEnd || yearEnd <= 0){alert('Enter Year Graduated'); return false;}
    if(!attainment || attainment == 'Attaintment'){alert('Enter Attainment'); return false;}
    if(attainment != 'Secondary' && course == ''){alert('Enter your course'); return false;}
      var data = {
          school : school,
          attainment: attainment,
          yearStart: yearStart,
          yearEnd: yearEnd,
          course:course
      }
    
    addSchool(data);  
     
});

$(document).on('click','.deleteSchool',function(){
  $(this).parent().parent().parent().fadeOut(1000,function(){
      $(this).remove();
  });
});  

$(document).on('click','#btnSaveStep3',function(){
  
    var schools = $('.mySchools');
    var schools_data = [];
    schools.each(function(){
        var meta = {};
        var school_name = $(this).attr('school');
        var yearStart = $(this).attr('yearStart');
        var yearEnd = $(this).attr('yearEnd');
        var attainment = $(this).attr('attainment');
        var course = $(this).attr('course');
        meta.school = school_name;
        meta.yearStart = yearStart;
        meta.yearEnd = yearEnd;
        meta.attainment = attainment;
        meta.course = course;
        schools_data[schools_data.length]= meta;
    });
    

    var skills = $('#skills-auto').select2('data');
    var mySkills = [];
    
    $(skills).each(function(i,val){
      mySkills[mySkills.length] = val.text;
    });
      
    save(mySkills,schools_data).done(function(result){
        //var skills = JSON.parse(result.skills);
        /* $(skills).each(function(i,val){
            alert(val);
        }); */
        var nextUrl = URL + 'registration/step_4';
        if(result.status){
          window.location.replace(nextUrl);
        }else{
          alert('not saved');
        }
    });

});
</script>


<script type="text/template" id="attainmentTpl">
      <div class="medium-10 medium-centered large-10 columns mySchools" school="{{school}}" yearStart="{{yearStart}}" yearEnd = "{{yearEnd}}" attainment="{{attainment}}" course = "{{course}}" style="padding-top:3rem;">
        <div class="school-field large-12 column">
          <div class="medium-8 large-8 columns">
            <p id="school">{{school}}({{yearStart}}-{{yearEnd}}</p>
            <p id="attaintment" style="margin-top:-1.4rem;"><small>{{attainment}}</small></p>
            <p id="myCourse" style="margin-top:-1.4rem;"><small>{{course}}</small></p>
          </div>
          <div class="cancel-btn text-right medium-4 large-4 columns">
            <a class="tiny radius button"><i class="fa fa-pencil-square-o"></i></a>&nbsp;
            <a class="tiny radius button deleteSchool"><i class="fa fa-times"></i></a>
          </div>
        </div>
      </div> 
</script>


